<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8"/>
    <title></title>
    <!--<link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">-->
    <script src="webjars/jquery/3.1.1/jquery.min.js"></script>
    <script src="webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="webjars/bootstrap/3.3.7/css/bootstrap.min.css"/>
</head>
<body>
<div class="row">

    <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content" id="modalContent">

            </div>
        </div>
    </div>


    <div class="page-header">
        <h1> DD发射 -
            <small>DaAo科技</small>
        </h1>
    </div>

    <div class="col-xs-6 col-sm-3">
        <ul class="list-group">
            <li class="list-group-item">
                <div class="input-group">
                    <span class="input-group-addon">经度</span>
                    <input type="text" class="form-control" placeholder="139.75" aria-describedby="basic-addon1"
                           id="basic-addon1">
                </div>
            </li>
            <li class="list-group-item">
                <div class="input-group">
                    <span class="input-group-addon">纬度</span>
                    <input type="text" class="form-control" placeholder="35.68" aria-describedby="basic-addon1"
                           id="basic-addon2">
                </div>
            </li>
            <li class="list-group-item">
                <div class="input-group">
                    <span class="input-group-addon">温度</span>
                    <input type="text" class="form-control" placeholder="23℃" aria-describedby="basic-addon1"
                           id="basic-addon3">
                </div>
            </li>
            <li class="list-group-item">
                <div class="input-group">
                    <span class="input-group-addon">速度</span>
                    <input type="text" class="form-control" placeholder="5" aria-describedby="basic-addon1"
                           id="basic-addon4">
                </div>
            </li>
            <li class="list-group-item">
                <div class="input-group">
                    <span class="input-group-addon">高度</span>
                    <input type="text" class="form-control" placeholder="10000" aria-describedby="basic-addon1"
                           id="basic-addon5">
                </div>
            </li>
        </ul>

        <div class="btn-group btn-group-justified" role="group" aria-label="...">
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default" onclick="send()" id="launch">发射</button>
            </div>
        </div>

        <br>

        <div class="btn-group btn-group-justified" role="group" aria-label="...">
            <div class="btn-group" role="group">
                <!--                <button type="button" class="btn btn-default" id="LaunchCheck">发射前检查</button>-->
                <button type="button" class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-sm"
                        id="LaunchCheck">发射前检查
                </button>
            </div>
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default" id="LaunchRead">发射准备</button>
            </div>
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-default" id="Launching">发射确定</button>
            </div>
        </div>

        <br>

        <div class="panel panel-default">
            <div class="panel-body" id="message">
                <div class="panel panel-default">
                    <!-- Default panel contents -->
                    <div class="panel-heading">
                        当前指标
                    </div>
                    <!-- Table -->
                    <table class="table">
                        <thead>
                        <tr>
                            <th>时间</th>
                            <td></td>
                        </tr>
                        </thead>

                        <thead>
                        <tr>
                            <th>经度</th>
                            <td></td>
                        </tr>
                        </thead>

                        <thead>
                        <tr>
                            <th>纬度</th>
                            <td></td>
                        </tr>
                        </thead>

                        <thead>
                        <tr>
                            <th>高度</th>
                            <td></td>
                        </tr>
                        </thead>
                    </table>
                    <div id="showEvent"></div>
                </div>
            </div>
        </div>

    </div>

    <div class="col-md-8">
        <!-- cesium -->
        <!-- 4:3 aspect ratio -->
        <div class="embed-responsive embed-responsive-4by3" id="aspectRatio">
            Hello,Daro科技
        </div>
    </div>
</div>

<script>
    $("#LaunchCheck").click(function () {
        let info = Math.floor(Math.random() * 100) + 1;
        $.ajax({
            url: 'getParameter',
            type: 'POST',
            dataType: "text",
            data: {
                'ids': info
            },
            success: function (result) {
                if (result == "可以发射") {
                    $("#LaunchCheck").css("background", "green")

                    $("#modalContent").append("<div class=\"progress\">\n" +
                        "  <div class=\"progress-bar progress-bar-striped active\" role=\"progressbar\" aria-valuenow=\"45\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 100%\">\n" +
                        "检查通过，请继续..." +
                        "  </div>\n" +
                        "</div>")

                    $("#LaunchRead").click(function () {
                        $("#LaunchRead").css("background", "green")
                        $("#showEvent").empty()
                        $("#showEvent").append("<div class=\"alert alert-success\" role=\"alert\">通讯连接成功</div>\n");
                    })
                } else {

                    $("#LaunchCheck").empty()
                    $("#LaunchCheck").text("检查未通过")
                    $("#LaunchCheck").css("color", "yellow")

                    $("#modalContent").append("<div class=\"progress\">\n" +
                        "  <div class=\"progress-bar progress-bar-danger progress-bar-striped\" role=\"progressbar\" aria-valuenow=\"80\" aria-valuemin=\"0\" aria-valuemax=\"100\" style=\"width: 100%\">\n" +
                        "检查未通过请重试!" +
                        "  </div>\n" +
                        "</div>")

                    setTimeout(function () {
                        window.parent.location.reload();
                    }, 2000)
                }
                // alert(result);
            },
            error: function (result) {
                alert("系统出错，请联系管理员！");
                $(document).ready(function () {
                    $("#showEvent").append("<div class=\"alert alert-danger\" role=\"alert\">系统出错，请联系管理员！</div>\n");
                });
            }
        });
    })

    $("#Launching").click(function () {
        let info = Math.floor(Math.random() * 100) + 1;
        $.ajax({
            url: '/geturl',
            type: 'POST',
            dataType: "text",
            data: {
                'ids': info
            },
            success: function (result) {
                console.log(result)
                if (result != "no") {
                    $("#Launching").css("background", "green")
                    $("#aspectRatio").empty()
                    $("#aspectRatio").append("<iframe class=\"embed-responsive-item\" src=" + result + "></iframe>")
                } else {
                    $("#Launching").text("不能发射");
                    $("#Launching").css("color", "yellow");
                    $("#aspectRatio").empty()
                    $("#aspectRatio").append("<iframe class=\"embed-responsive-item\">不能发射</iframe>")
                }
            },
            error: function (result) {
                alert("系统出错，请联系管理员！");
                $("#aspectRatio").empty()
                $("#aspectRatio").append("<iframe class=\"embed-responsive-item\">不能发射</iframe>")
            }
        });
    })

    var websocket = null;
    if ('WebSocket' in window) {
        console.log("index-socket 开始...");
        //建立webSocket连接
        websocket = new WebSocket('ws://localhost:8080/websocket');
    } else {
        // alert('当前浏览器 Not support websocket')
        $(document).ready(function () {
            $("#showEvent").empty()
            $("#showEvent").append("<div class=\"alert alert-danger\" role=\"alert\">当前浏览器不支持WebSocket</div>\n");
        });
    }
    //连接发生错误的回调方法
    websocket.onerror = function () {
        console.log("index-WebSocket连接发生错误")
        $(document).ready(function () {
            $("#showEvent").empty()
            $("#showEvent").append("<div class=\"alert alert-danger\" role=\"alert\">连接发生错误</div>\n");
        });
    };

    //连接成功建立的回调方法
    websocket.onopen = function () {
        console.log("index-WebSocket连接成功")
        /*        $(document).ready(function () {
                    $("#showEvent").empty()
                    $("#showEvent").append("<div class=\"alert alert-success\" role=\"alert\">通讯连接成功</div>\n");
                });
         */
    }

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        var data = event.data;
        console.log("index-回调方法 --- >" + event.data)
        setMessageInnerHTML(data)
    }

    //连接关闭的回调方法
    websocket.onclose = function () {
        $(document).ready(function () {
            $("#showEvent").empty()
            $("#showEvent").append("<div class=\"alert alert-danger\" role=\"alert\">通讯连接失败请重试！</div>\n");
        });
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        closeWebSocket();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        // document.getElementById('message').innerHTML += innerHTML + '<br/>';
        // var element = document.getElementById('message');
        var split = innerHTML.split(",");
        $(document).ready(function () {
            $("td").eq(0).html(split[0]);
            $("td").eq(1).html(split[1]);
            $("td").eq(2).html(split[2]);
            $("td").eq(3).html(split[3]);
        });
    }

    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    }

    //发送消息
    function send() {
        // var message = document.getElementById('text').value;
        // 经度
        var lng = document.getElementById('basic-addon1').value;
        // 纬度
        var lat = document.getElementById('basic-addon2').value;
        //温度
        var temp = document.getElementById('basic-addon3').value;
        //速度
        var vel = document.getElementById('basic-addon4').value;
        //高度
        var height = document.getElementById('basic-addon5').value;

        var params = [];
        params.push(lng);
        params.push(lat);
        params.push(temp);
        params.push(vel);
        params.push(height);
        var message = JSON.stringify(params);

        $.ajax({
            url: '/getlaunch',
            type: 'POST',
            dataType: "json",
            data: {
                'par': message
            },
            success: function (result) {

            },
            error: function (result) {

            }
        });

        console.log(message)
        websocket.send(message);
    }

</script>

</body>
</html>